<template>
    <div class="main">
        <!--顶栏-->
        <el-row>
            <el-col :span="24" class="title_area">
                <h4>商品分类管理</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>商品分类列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <!--搜索栏-->
        <div class="search_panel">
            <el-row>
                <el-col :span="4" class="jiange">
                    <el-input v-model="name" placeholder="名称"></el-input>
                </el-col>

                <el-col :span="6">
                    <el-button type="primary"  class="btn_login" @click="productCategoryList"><i class="el-icon-search"></i>查询</el-button>
                    <el-button type="primary"  class="btn_login" @click="createProductCateGory">添加商品分类</el-button>
                </el-col>
            </el-row>
        </div>

        <!--列表-->
        <el-table :data="tableData"  border style="width: 100%;margin-top: 20px">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column  label="操作" width="200">
                <template scope="scope">
                    <el-button  type="default" size="small" @click="productCategoryEdit(scope.$index,tableData)">修改</el-button>
                    <el-button  type="default" size="small" @click="deleteBook(scope.$index,tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination class="pagination"
                background
                layout="prev, pager, next"
                pagesize="20"
                :total="pagination.total_pages">
        </el-pagination>


    </div>
</template>
<style scoped="">
    .main {
        padding-top: 50px;
        padding-left: 50px;
    }
</style>
<script>

  export default {
    data() {
      return {
        options: [{
          value: 'price',
          label: '原价'
        }, {
          value: 'discount',
          label: '折扣价'
        }, {
          value: 'score',
          label: '评分'
        }],
        prop: '',
        className:'right',
        tableData:[],
        name: '',
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        total_pages: 100
      }
    },
    components: {

    },

    created() {
      this.productCategoryList()
    },

    methods: {

      shelfeBook(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }
        this.$store.dispatch('shelfBook', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '书籍上架成功',
              type: 'success'
            });
            this.bookList()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })

      },

      productCategoryEdit(index, table) {
        var id = table[index].id
        this.$router.push({name: 'productCategoryEdit', params: {id: id}})
      },

      relationBookBookCategory(index, table) {
        var id = table[index].id
        this.$router.push({name: 'addBookBookCategory', params: {id: id}})
      },

      deleteBook(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }

        this.$confirm('此操作将删除此商品分类，是否继续','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('prodcutCategoryDelete', params).then(ret => {
            if(ret.success) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.productCategoryList()
            }else{
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      changeRight(value) {
        this.className = value
      },

      productCategoryList() {
        let params = {
          name: this.name,
        }

        this.$store.dispatch('productCateGoryList', params).then((ret) => {
          this.tableData = ret.data.product_categories.data
          this.pagination.pagination  = ret.data.product_categories.meta.pagination
        })

      },

      createProductCateGory() {
        this.$router.push({ name: "createProductCateGory" });
      }
    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
</style>
